<!-- 登录页面 -->
<template>
  <div class="w-full h-full flex items-center login-container justify-center relative bg-green-50">
    <div class="title">
      <span>日食三餐，夜眠七尺！</span>
    </div>
    <div class="login_pane flex flex-col items-center">
      <div class="text">用户登录，欢迎您！</div>
      <a-form
        ref="loginFormRef"
        :model="formState"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 20 }"
      >
        <a-form-item name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
          <a-input v-model:value="formState.username" style="width: 300px">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item name="password" :rules="[{ required: true, message: '请输入密码!' }]">
          <a-input-password v-model:value="formState.password" style="width: 300px">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>
      </a-form>
      <div
        class="w-full flex items-center justify-center login_btn mt-5"
        style="width: 300px"
        @click="login"
      >
        登 录
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter() // 所有路由

const formState = reactive({
  username: '',
  password: ''
})
onMounted(async () => {
  window.addEventListener('keydown', keyDown)
})
onUnmounted(() => {
  window.removeEventListener('keydown', keyDown, false)
})
const keyDown = (e) => {
  //如果是回车则执行登录方法
  if (e.keyCode === 13) {
    login()
  }
}

const loginFormRef = ref()

const login = async () => {
  loginFormRef.value.validateFields().then(async () => {
    router.push('/custom')
  })
}
</script>

<style lang="less" scoped>
.login-container {
  // background-image: url('@/assets/images/loginBg.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.title {
  left: 3.125rem;
  top: 3.125rem;
  position: absolute;
  font-size: 44px;
  font-family: Alibaba PuHuiTi;
  color: #393940;
  text-shadow: 0px 5px 9px rgba(0, 0, 0, 0.15);
  background: linear-gradient(0deg, #2e58d9 0%, #4974f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text {
  width: 198px;
  height: 22px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #393940;
  line-height: 21px;
  margin-bottom: 2rem;
}
.login_pane {
  width: 536px;
  background: #ffffff;
  box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 4rem 0;
}
.login_btn {
  width: 420px;
  height: 52px;
  background: #4974f7;
  border-radius: 5px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 21px;
  cursor: pointer;
}
</style>
